import { Component, OnInit } from '@angular/core'
import { FormBuilder, Validators, FormGroup, FormControl } from '@angular/forms'
import { NzMessageService } from 'ng-zorro-antd'

import { NewPageBaseClass } from '@shared/classes/NewPageBaseClass'
import { Merchant, ICreateMerchant } from '@shared/interfaces/merchant'
import { MerchantStoreService } from '../merchant-store.service'
import {
  emailReg,
  merNumReg,
  merNameENReg,
  merNumMaxLength,
  merNameMaxLength,
  merNameENMaxLength,
  contactNameMaxLength,
  emailMaxLength,
} from 'app/utils/contraints'
import { NumConflictAsyncValidator } from 'app/utils/form-control.validator'
import { BusinessService } from '@shared/services/business.service'
import { EBizLevel } from '@shared/enums'
import { I18NService } from '@core'

@Component({
  selector: 'app-merchant-new-base',
  templateUrl: './base.component.html',
  styleUrls: ['../../../../shared/styles/new-page-form.less'],
})
export class MerchantNewBaseComponent extends NewPageBaseClass implements OnInit {
  merchant: Merchant
  validateForm: FormGroup

  errorTips = {}

  constructor(
    public msg: NzMessageService,
    public i18n: I18NService,
    private fb: FormBuilder,
    private merchantStore: MerchantStoreService,
    private bizService: BusinessService,
  ) {
    super(msg, i18n)
  }

  ngOnInit(): void {
    this.merchantStore.value$.subscribe(createMerchant => (this.merchant = createMerchant.merchant))
    const { common } = this.merchant
    this.validateForm = this.fb.group({
      merNum: new FormControl(common.merNum, {
        validators: [Validators.maxLength(merNumMaxLength), Validators.pattern(merNumReg)],
        asyncValidators: [NumConflictAsyncValidator(this.bizService, common.insCode, EBizLevel.Merchant)],
        updateOn: 'blur',
      }),
      merName: [common.merName, [Validators.required, Validators.maxLength(merNameMaxLength)]],
      merNameEN: [
        common.merNameEN,
        [Validators.required, Validators.maxLength(merNameENMaxLength), Validators.pattern(merNameENReg)],
      ],
      contactName: [common.contact.name, [Validators.required, Validators.maxLength(contactNameMaxLength)]],
      contactEmail: [
        common.contact.email,
        [Validators.required, Validators.maxLength(emailMaxLength), Validators.pattern(emailReg)],
      ],
    })
    this.initErrorTips()
  }

  initErrorTips() {
    this.errorTips = {
      merNum: {
        maxlength: this.trans('VALIDATION.MAX_LENGTH', { length: merNumMaxLength }),
        pattern: this.trans('VALIDATION.PATTERN.ALPHANUMERIC_ONLY'),
        isNumTaken: this.trans('VALIDATION.CODE_EXISTS', { name: this.trans('GENERAL.MERCHANT.NUM') }),
      },
      merName: {
        required: this.trans('VALIDATION.REQUIRED', { name: this.trans('GENERAL.MERCHANT.NAME') }),
        maxlength: this.trans('VALIDATION.MAX_LENGTH', { length: merNameMaxLength }),
      },
      merNameEN: {
        required: this.trans('VALIDATION.REQUIRED', { name: this.trans('GENERAL.MERCHANT.NAME_EN') }),
        maxlength: this.trans('VALIDATION.MAX_LENGTH', { length: merNameENMaxLength }),
        pattern: this.trans('VALIDATION.PATTERN.ALPHANUMERIC_SYMBOLS_ONLY'),
      },
      contactName: {
        required: this.trans('VALIDATION.REQUIRED', { name: this.trans('GENERAL.INFO.CONTACT_NAME') }),
        maxlength: this.trans('VALIDATION.MAX_LENGTH', { length: contactNameMaxLength }),
      },
      contactEmail: {
        required: this.trans('VALIDATION.REQUIRED', { name: this.trans('GENERAL.INFO.EMAIL') }),
        maxlength: this.trans('VALIDATION.MAX_LENGTH', { length: emailMaxLength }),
        pattern: this.trans('VALIDATION.PATTERN.EMAIL'),
      },
    }
  }

  checkValid(): boolean {
    const valid = this.validateForm.valid
    if (valid) {
      this.pushDataToStore()
      this.msg.success(this.trans('GENERAL.NOTIFICATION.VALIDATION_SUCCESS'))
    } else {
      this.makeAllControlDirty(this.validateForm)
      this.msg.error(this.trans('GENERAL.NOTIFICATION.VALIDATION_FAIL'))
    }
    return valid
  }

  pushDataToStore(): void {
    this.fullfilData(this.validateForm.value)
    this.merchantStore.updateValue({ merchant: this.merchant } as ICreateMerchant)
  }

  private fullfilData(value: any): void {
    const { common } = this.merchant
    common.merNum = value.merNum
    common.merName = value.merName
    common.merNameEN = value.merNameEN
    common.contact.name = value.contactName
    common.contact.email = value.contactEmail
    this.merchant.common = common
  }
}
